@import 'reset.scss'; //初始化样式
$const: 1690/16.9rem;
$bgcolor:#F3F3F3;
@mixin panelBoder($borderColor: 1px solid #C60E58, $borderRadius:10px) {
    border: $borderColor;
    border-radius: $borderRadius;
    -webkit-border-radius: $borderRadius;
    -moz-border-radius: $borderRadius;
    -ms-border-radius: $borderRadius;
    -o-border-radius: $borderRadius;
}

@mixin flex($direction:column, $inline:block) {
    display: if($inline==block, flex, inline-flex);
    flex-direction: $direction;
    flex-wrap: wrap;
}

@mixin list($direction:column) {
    @include flex($direction);
}

@mixin panel($background:#fff, $minHeight:170px) {
    padding: 32px 27px;
    background: $background;
    min-height: $minHeight;
}

[v-cloak] {
    display: none;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(0, 0, 0, 0.2);*/
    z-index: 10000;
}

.loading div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300/$const;
    height: 200/$const;
    margin-left: -150/$const;
    margin-top: -100/$const;
    /*background: rgba(250, 250, 250, 0.8);*/
    border-radius: 10/$const;
    text-align: center;
}

.loading div img {
    margin-top: 50/$const;
}

.loginmodal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 10000;
}

.oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt {
    float: left;
}

.rt {
    float: right;
}

body {
    min-width: 1333px;
    font-size: 18/$const;
    background-color: $bgcolor;
}

.main {
    padding: 20/$const;
    background-color: $bgcolor;
    overflow: hidden;
    .main-left {
        float: left;
        width: 286/$const;
        //      min-height: 580px;
        //      background: #fff;
        .left-top {
            width: 100%;
            height: 117/$const;
            background: url('../img/bgindexlefttop.png') no-repeat;
            color: #FFFFFF;
            padding: 14/$const 18/$const;
            overflow: hidden;
            >div {
                font-size: 18/$const;
                overflow: hidden;
            }
            >p {
                margin-top: 20/$const;
                font-size: 22/$const;
            }
            .lt {
                h4 {
                    margin-top: 5/$const;
                }
            }
        }
        .left-body {
            width: 100%;
            .title {
                width: 100%;
                height: 50/$const;
                line-height: 50/$const;
                margin-top: 8/$const;
                background-color: #fafafa;
                border-top-right-radius: 8/$const;
                border-top-left-radius: 8/$const;
                -webkit-border-top-right-radius: 8/$const;
                -webkit-border-top-left-radius: 8/$const;
                -ms-border-top-right-radius: 8/$const;
                -ms-border-top-left-radius: 8/$const;
                -moz-border-top-right-radius: 8/$const;
                -moz-border-top-left-radius: 8/$const;
                span {
                    float: left;
                    font-size: 18/$const;
                    margin-left: 15/$const;
                    color: #333333;
                }
                img {
                    float: left;
                    width: 32/$const;
                    height: auto;
                    margin-top: 13/$const;
                    margin-left: 16/$const;
                }
            }
            .content {
                .list {
                    @include panel;
                    width: 100%;
                    font-size: 14/$const;
                    border-bottom: 1px solid #EAEAEA;
                    h3 {
                        color: #7F109D;
                    }
                    p {
                        @extend .oneline;
                        margin-top: 17/$const;
                        cursor: pointer;
                    }
                }
                .list:last-child {
                    border-bottom: none;
                    border-bottom-right-radius: 8/$const;
                    border-bottom-left-radius: 8/$const;
                    -webkit-border-bottom-right-radius: 8/$const;
                    -webkit-border-bottom-left-radius: 8/$const;
                    -ms-border-bottom-right-radius: 8/$const;
                    -ms-border-bottom-left-radius: 8/$const;
                    -moz-border-bottom-right-radius: 8/$const;
                    -moz-border-bottom-left-radius: 8/$const;
                }
            }
        }
    }
    .main-right {
        float: left;
        width: 1416/$const;
        min-height: 580/$const;
        margin-left: 12/$const;
        background: #fff;
        border-radius: 8/$const;
        border-radius: 8/$const;
        -webkit-border-radius: 8/$const;
        -ms-border-radius: 8/$const;
        -moz-border-radius: 8/$const;
        .left {
            position: relative;
            width: 566/$const;
            min-height: 580/$const;
            color: #234795;
            font-size: 22/$const;
            .navbg {
                width: 289/$const;
                height: auto;
                margin-left: 143/$const;
                margin-top: 130/$const;
            }
            .ditu {
                position: absolute;
                top: 212/$const;
                left: 207/$const;
                width: 169/$const;
                height: 131/$const;
            }
            .zhengshu {
                position: absolute;
                top: 290/$const;
                left: 388/$const;
                img {
                    width: 56/$const;
                    height: auto;
                    cursor: pointer;
                }
                p {
                    position: absolute;
                    width: 100/$const;
                    top: 56/$const;
                    left: 0.7rem;
                }
            }
            .renyuan {
                position: absolute;
                top: 139/$const;
                left: 172/$const;
                img {
                    width: 56/$const;
                    height: auto;
                    cursor: pointer;
                }
                p {
                    position: absolute;
                    top: -70/$const;
                    left: -70/$const;
                }
            }
            .qiye {
                position: absolute;
                top: 134/$const;
                left: 340/$const;
                img {
                    width: 56/$const;
                    height: auto;
                    cursor: pointer;
                }
                p {
                    position: absolute;
                    width: 100/$const;
                    top: -70/$const;
                    left: 38/$const;
                }
            }
            .peixun {
                position: absolute;
                top: 286/$const;
                left: 125/$const;
                img {
                    width: 56/$const;
                    height: auto;
                    cursor: pointer;
                }
                p {
                    position: absolute;
                    top: 53/$const;
                    left: -110/$const;
                }
            }
            .system {
                position: absolute;
                top: 385/$const;
                left: 265/$const;
                img {
                    width: 56/$const;
                    height: auto;
                    cursor: pointer;
                }
                p {
                    position: absolute;
                    width: 100/$const;
                    top: 97/$const;
                    left: -16/$const;
                }
            }
        }
        .right {
            //          min-width:850px;
            width: 820/$const;
            ul.iconList {
                width: 820/$const;
                margin-top: 20/$const;
                li {
                    position: relative;
                    float: left;
                    width: 30%;
                    margin-top: 100/$const;
                    text-align: center;
                    cursor: pointer;
                    >p {
                        margin-top: 18/$const;
                        color: #202020;
                    }
                    >img {
                        width: 100/$const;
                        height: auto;
                    }
                    >h4 {
                        display: none;
                        position: absolute;
                        top: 40/$const;
                        left: 1.8rem;
                        width: 64/$const;
                        padding: 5/$const 0px;
                        border: 1px solid #FCA931;
                        color: #FCA931;
                        cursor: pointer;
                        border-radius: 20/$const;
                        font-size: 14/$const;
                    }
                    >span {
                        //                      display: none;
                        position: absolute;
                        top: 0;
                        left: 1.35rem;
                        width: 0.6rem;
                        height: 0.3rem;
                        line-height: 0.3rem;
                        border-radius: 15px;
                        background: #F21919;
                        text-align: center;
                        color: #fff;
                        font-size: 0.15rem;
                        font-weight: 600;
                    }
                    .toast1 {
                        display: none;
                        position: absolute;
                        top: -0.8rem;
                        left: 1.4rem;
                        img {
                            width: 129/$const;
                            height: 79/$const;
                        }
                        div {
                            position: absolute;
                            top: 0.08rem;
//                          left: 10/$const;
                            width: 100%;
                            p {
                                width: 100%;
                                @extend .oneline;
                                font-size: 12/$const;
                                color: #e50404;
                            }
                            p:first-child {
                                margin-bottom: 10/$const;
                            }
                        }
                    }
                }
            }
            //企业信息
            ul.company {
                @include panelBoder;
                width: 458/$const;
                min-height: 484/$const;
                padding: 48/$const 0 0 39/$const;
                margin: 40/$const 0 0 150/$const;
                li {
                    margin-top: 18/$const;
                    color: #202020;
                    font-size: 16/$const;
                }
                li:first-child {
                    margin-top: 0;
                }
            }
        }
    }
}
//@media screen and (max-width: 1024px) {
//  
//}
